<template>
	<div class="address-box">
		<nav-bar class="nav-bar">
			<template v-slot:default>
				地址管理
			</template>
		</nav-bar>

		<div v-show="list.length === 0" style="margin-top:200px;text-align: center;">
			还没有地址信息，去添加吧！
		</div>

		<div class="address-item">
			<van-address-list
				v-model="chosenAddressId"
				:list="list"
				default-tag-text="默认"
				@add="onAdd"
				@edit="onEdit"
			/>
		</div>
	</div>
</template>

<script setup>
import NavBar from "@/components/common/navbar/NavBar.vue";
import {useRouter} from "vue-router";
import {onMounted, reactive, toRefs} from "vue";
import {getAddressList} from "@/network/address";

const router = useRouter()
const state = reactive({
	chosenAddressId: '1',
	list: []
})
const {chosenAddressId, list} = toRefs(state)

const onAdd = () => {
	router.push({path: '/addressedit', query: {type: 'add'}})
}
const onEdit = (item) => {
	router.push({path: '/addressedit', query: {type: 'edit', addressId: item.id}})
}
// 获取地址列表信息
const AddressList = () => {
	getAddressList().then(res => {
		if (res.data.length === 0) {
			state.list = [];

		} else {
			state.list = res.data.map(item => {
				const {id, name, phone, province, city, county, address, is_default} = item;
				return {
					id,
					name,
					tel: phone,
					address: `${province}省${city}市${county};详细地址：${address}`,
					isDefault: !!is_default
				}
			})
		}
	})
}
onMounted(() => {
	// 获取地址列表信息
	AddressList()
})
</script>

<style lang="scss">
.address-box {
	height: 300px;

	.van-radio__icon {
		display: none;
	}

	.address-item {
		margin-top: 45px;

		.van-button {
			background: var(--color-tint);
			border-color: var(--color-tint);
		}
	}
}

.van-address-list__bottom {
	bottom: 100px !important;
}
</style>
